<template>
	<view class="orderList">
		<view class="tabs flex-center">
			<view :class="{active:tabIndex == 0}" @click="changeTab(0)">总览</view>
			<view :class="{active:tabIndex == 1}" @click="changeTab(1)">跟随</view>
		</view>
		<view class="content">
			<view class="menus flex">
				<view :class="{active:menuIndex == 0}" @click="changeMenu(0)">跟随中</view>
				<view :class="{active:menuIndex == 1}" @click="changeMenu(1)">历史</view>
			</view>
			<block v-for="(item,index) in 5" :key="index">
				<view class="card">
					<view class="flex-between">
						<view class="flex left">
							<image src="/static/1.jpg" mode="aspectFill"></image>
							<view class="h3 name">金刚葫芦娃</view>
						</view>
						<view class="middle">
							<text>跟随收益/策略</text>
						</view>
						<view class="right">
							<text>跟随交易额/笔</text>
						</view>
					</view>
					<view class="flex-between" style="margin: 15rpx 0;">
						<view class="h3 left">Huobi</view>
						<view class="middle" style="color:#09ad25">0.000000</view>
						<view class="right h3">0.000000</view>
					</view>
					<view class="flex-between">
						<text class="left">跟随USDT 0小时</text>
						<view class="middle h3">正向0.1倍</view>
						<view class="right h3">0</view>
					</view>
				</view>
			</block>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabIndex:0,
				menuIndex:0,
			};
		},
		methods:{
			changeTab(index){
				this.tabIndex = index;
			},
			changeMenu(index){
				this.menuIndex = index;
			}
		}
	}
</script>

<style lang="less">
	page{
		
	}
	.orderList{
		// padding: 90rpx 24rpx 0;
		.tabs{
			// position: fixed;
			background: white;
			width: 100vw;
			height: 70rpx;
			left: 0;
			top: 0;
			view{
				padding:0 30rpx ;
				font-size: 30rpx;
				font-weight: bold;
				color:#999;
				font-weight: bold;
				&.active{
					color:#000;
				}
			}
		}
		.content{
			padding: 30rpx;
			.menus{
				
				&>view{
					font-size: 28rpx;
					font-weight: bold;
					background: white;
					padding: 7rpx 30rpx;
					border-radius: 40rpx;
					margin-right: 30rpx;
					color:#999;
					&.active{
						color:#000;
					}
				}
			}
			.card{
				background: white;
				padding: 20rpx;
				border-radius: 15rpx;
				margin-top: 30rpx;
				image{
					width: 70rpx;
					height: 70rpx;
					border-radius: 50%;
					margin-right: 20rpx;
				}
				.h3{
					font-size: 26rpx;
					font-weight: bold;
				}
				text{
					font-size: 24rpx;
					color:#999;
				}
				.name{
					width:150rpx ;
					overflow:hidden;
					text-overflow:ellipsis;
					white-space:nowrap;
				}
				.left{
					width: 38%;
				}
				.middle{
					width: 30%;
					text-align: center;
				}
				.right{
					width: 30%;
					text-align: right;
				}
			}
		}
	}
</style>
